<template>
  <div class="VolunteerList" runat="server">
    <el-container>
      <el-aside width="150px">
      </el-aside>
      <el-main>
        <span class="demonstration"><i>志愿者列表</i></span>
        <el-divider></el-divider>
        <el-table :data="volunteerArr">
          <el-table-column type="index" label="编号"
                           width="100"></el-table-column>
          <el-table-column label="头像" width="150">
            <template slot-scope="scope">
              <!--scope.row代表当前遍历的数组中的对象-->
              <el-avatar :size="70" :src="scope.row.userIcon"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="userName" width="100"></el-table-column>
          <el-table-column label="住址" prop="userAddress" width="150"></el-table-column>
          <el-table-column label="联系电话" prop="userPhone" width="150"></el-table-column>
          <!--*******************************-->
        </el-table>

      </el-main>
    </el-container>
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="total" align="center">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {setToken} from "@/utils/Token";
import {VolunteerList} from "@/api/admin_api";
export default {
  name: "volunteerList",
  data() {
    return {
      volunteerArr: [],
      page:1,
    }
  },
  created() {
  //  setToken('token', 'eyJjdHkiOiJIUzI1NiIsInR5cCI6IkpXVCIsImFsZyI6IkhTMjU2In0.eyJuZXRJZCI6MSwiaWRlbnRpdHkiOjIsIm5ldFBhc3N3b3JkIjoiJDJhJDEwJHpvaW9Sc085WjBDL1g0b1JHSmxRSC5weTlQeGdXUDF1SEtrWEQ2OTF2UHJaQVM4LnBDb0NtIiwiY29tbXVuaXR5SWQiOjEsImV4cCI6MTY2NDM0NjAwNCwiYWNjb3VudCI6IjExMTFAcXEuY29tIn0.Zao1ELbFHJlhkmPgRjYIAATwPZPDNc1uyI0y-SSn3vI\n')
    VolunteerList().then((res) => {
          this.volunteerArr = res.data.data;
        }
    )
  },

  methods: {
    //分页的方法
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val
    }
  },
}
</script>

<style scoped>

</style>